<template>
  <el-button class="Win11">win11-样式1</el-button>
</template>

<script setup>
</script>

<style scoped>
button.Win11 {
  transition-duration: 0.4s;
  font-size: 12px;
  background: #f8f8f8;
  border: 0.5px solid #ddd;
  border-bottom-color: #bbb;
  color: #000;
  border-radius: 4px;
  padding: 1px 8px 1px 8px;
  font-family: /*Windows 11 font here*/ "Segoe UI Variable", "Segoe UI",
  "Webly Sleek UI", "Frutiger", "Lucida Sans Unicode", "Lucida Grande",
  "Open Sans", sans-serif;
}

button.Win11:hover {
  transition-duration: 0.4s;
  background: #ebf4fc;
  border-color: #57b;
}

button.Win11:active {
  transition-duration: 0s;
  background: #c4e0fc;
  border-color: #458;
}
</style>